<template>
  <div class="container_main">
    <!-- <div class="calcTable">
      <div class="smallCard upCard">
        <div class="cardTitle">
          <i class="iconfont icon-shuju"></i>
          <div class="cardSvg">监测数据</div>
        </div>
        <calcTable :svgData="svgDatas"></calcTable>
      </div>
    </div> -->
    <div class="calcSvg">
      <calcProcess :svgData="svgDatas"></calcProcess>
    </div>
    <!-- <div class="thirdBox">
      <div class="hollCard">

          <div class="titleStove">
            <div class="divGroup">
              <i class="iconfont_class" :class="secondTwoBoxTable.icons"></i>
              <div class="typeface">{{secondTwoBoxTable.titleName}}</div>
            </div>
          </div>
      </div>
    </div> -->

    <div class="calcEcharts">
      <div class="calcEcharts1">
        <div class="cardTitle">
          <i class="iconfont icon-shuju"></i>
          <div class="textSvg">煅烧除尘运行</div>
        </div>
        <div class="forChart">
          <chuchenEcharts></chuchenEcharts>
        </div>
      </div>
      <div class="calcEcharts2">
        <div class="cardTitle">
          <i class="iconfont icon-shuju"></i>
          <div class="textSvg">地沟皮带运行</div>
        </div>
        <div class="forChart">
          <pidaiEcharts></pidaiEcharts>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import calcProcess from "./calcComponents/calcProcess.vue";
import chuchenEcharts from "@/views/calcComponents/chuchenEcharts.vue";
import pidaiEcharts from "@/views/calcComponents/pidaiEcharts.vue";
// import calcTable from './calcComponents/calcTable.vue'
// import dialBroad from '../components/dialBroad/index.vue' // 仪表盘
// import capsuleDiagram from '../components/capsuleDiagram/index.vue' // 胶囊柱图

import "@/mock/allData.js";
export default {
  name: "tunnel",
  components: {
    calcProcess,
    chuchenEcharts,
    pidaiEcharts,
    // calcTable
  },
  data() {
    return {
      chartData: {},
      dtuStatus: false,
      windStatus: false,
      ployData: [],
      svgDatas: [],
      oxygenDatas: {},
      typesfourthBoxTable: {
        stripe: false,
        formHead: [],
        tableAllData: [],
      },
      thirdBoxTable: [],
      secondTwoBoxTable: {
        icons: "iconfont icon-shujuyuan",
        titleName: "测试一",
        stripe: false,
        formHead: [],
        tableCheckData: [],
      },
      timer: null,
      websock: null,
    };
  },
  created() {
    // this.$socket.createWebSocket('ws://106.52.170.16:8090/getTunnelWSData')
    // // this.$socket.createWebSocket('ws://192.168.117.216:8090/getTunnelWSData')
    // this.$socket.registerCallBack('chartAllData', this.getAllData)
    this.initWebSocket();
  },
  mounted() {},
  // beforeRouteLeave (to, from, next) {
  //   this.$socket.unRegisterCallBack('chartAllData')
  //   this.$socket.routerLeaveClose()
  //   next()
  // },
  destroyed() {
    this.websock.close(); // 离开路由之后断开websocket连接
  },
  methods: {
    initWebSocket() {
      // 初始化weosocket
      // this.websock = new WebSocket('ws://192.168.240.216:8060/getTunnelWSData')
      this.websock = new WebSocket(
        "ws://101.42.233.226:8060/formPlcWBData/get"
      );
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onerror = this.websocketonerror;
    },
    websocketonerror() {
      // 连接建立失败重连
      this.reconnect();
    },
    websocketonmessage(e) {
      // console.log('接收到的隧道窑数据', JSON.parse(e.data), 111)
      const redata = JSON.parse(e.data);
      console.log(redata);
      this.getAllData(redata);
    },
    reconnect() {
      // 重连
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.initWebSocket();
      }, 5000);
    },
    // 调后台数据的接口统一在这个组件写 统一传给子组件
    getSvgDatas(data) {
      this.svgDatas = data;
    },
    getAllData(ret) {
      if (ret !== undefined) {
        // console.log('ret接收的煅烧数据', ret.data.data)
        this.getSvgDatas(ret.data.data); // oxygen temperLine temperTable
      }
    },
  },
};
</script>
<style  scoped>
.container {
  width: 100%;
  height: 100%;
}
.calcSvg {
  width: 75%;
  height: 100%;
  border-top: 3px rgb(78, 200, 162) solid;
}

.calcEcharts {
  width: 24.1%;
  height: 100%;
}
.calcEcharts1 {
  width: 100%;
  height: 49.5%;
  margin-bottom: 8px;
  border-top: 3px #f97577 solid;
}
.calcEcharts2 {
  width: 100%;
  height: 49.6%;
}
.cardTitle {
  display: flex;

}
.forChart {
  height: 100%;
  width: 100%;
}
.iconfont {
    margin-left: 5px;
    color: rgba(255, 255, 255, 0.87);
    font-size: 1.3rem;
    padding-top: 10px;
  }
  .textSvg {
    margin-left: 7px;
    color: rgba(255, 255, 255, 0.87);
    font-size: 1.05rem;
    padding-top: 8px;
  }
</style>
